<template>
	<view class="timeRange-container">
		<view class="tab-box">
			<view @click="changeTab(item)" v-for="item in tabList" :key="item.key" :class="{ 'tab-item': true, activeTab: current.key == item.key }">{{ item.name }}</view>
		</view>
		<view class="picker-box">
			<picker-view :value="pickerValue" @change="pickerChange" class="picker-view">
				<picker-view-column>
					<view class="pickerItem" v-for="(item, index) in hour" :key="index">{{ item }}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="pickerItem" v-for="(item, index) in minute" :key="index">{{ item }}</view>
				</picker-view-column>
			</picker-view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

// 选中的时间范围
const timeRange = defineModel({
	default: [[], []]
});

// 时间列表项
const current = ref({ key: 'start' }); // 当前选中的tab
const tabList = ref([
	{
		name: '开始时间',
		key: 'start'
	},
	{
		name: '结束时间',
		key: 'end'
	}
]);

// 切换时间tab
const changeTab = (item) => {
	console.log('tab:', item);
	current.value = item;
	
	if (item.key == 'start') {
		timeRange.value[0].length ? (pickerValue.value = timeRange.value[0]) : (pickerValue.value = [0, 0]);
	} else if (item.key == 'end') {
		timeRange.value[1].length ? (pickerValue.value = timeRange.value[1]) : (pickerValue.value = [23, 59]);
	}
	
	console.log('timeRange:', timeRange.value);
};

// picker显示
const pickerShow = ref(true);

// picker改变
const pickerValue = ref([]);
const pickerChange = (e) => {
	console.log('pickerChange:', e);
	
	let chooseValue = e.detail.value;
	chooseValue.forEach((item, index) =>{
		if (item >= 0 && item < 10) {
			chooseValue[index] = '0' + item;
		}
	})
	
	console.log(chooseValue,'-----------------------');
	
	if (current.value.key == 'start') {
		timeRange.value[0] = chooseValue;
	} else if (current.value.key == 'end') {
		timeRange.value[1] = chooseValue;
	}
	console.log('timeRange:', timeRange.value);
};

// 小时列表
const hour = ref([]);
for (let i = 0; i < 24; i++) {
	if (i < 10) {
		hour.value.push('0' + i);
	} else {
		hour.value.push(i);
	}
}

// 分钟列表
const minute = ref([]);
for (let i = 0; i < 60; i++) {
	if (i < 10) {
		minute.value.push('0' + i);
	} else {
		minute.value.push(i);
	}
}
</script>

<style lang="scss" scoped>
.timeRange-container {
	.tab-box {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;

		.tab-item {
			position: relative;
			width: 8em;
			height: 120rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			&::after {
				position: absolute;
				bottom: 24rpx;
				content: '';
				display: block;
				width: 3em;
				height: 6rpx;
				border-radius: 4rpx;
				display: none;
				background-color: $uni-main-color;
			}
		}

		.activeTab {
			&::after {
				display: block;
			}
		}
	}

	.picker-box {
		height: 400rpx;
		padding: 0 40rpx;
		
		.picker-view {
			width: 100%;
			height: 400rpx;
		}

		.pickerItem {
			height: 34px;
			line-height: 34px;
			text-align: center;
		}
	}
}
</style>
